<template>
  <view class="ditu" :style="{ height: height + 'px' }">
    <input-subject :itemModel="models" @send="receiveFromChild" :subjectList="subjectList" @sendParentTree="receiveTree"></input-subject>
    <view class="bottom">
      <button class="btn back" @click="back">取消</button>
      <button class="btn" @click="submit">确认</button>
    </view>
  </view>
</template>

<script>
import { getScreen, saveImage, curTime, getUserInfo } from '@/service/auth'
import { addWorkLog } from '@/service/api/common_down'
import { basSubjectList,addBasSubject } from '@/service/api/shopping'
import inputSubject from '../../components/InputSubject.vue'

export default {
  components: { inputSubject },
  data() {
    return {
      currentDate: '',
      user: {},
      models: [],
      form: {
        code: '',
        name: '',
        pid:'',
        pcode:'',
        pname:''
      },
      subjectList: [],
    }
  },
  created() {
    const that = this
    const { height } = getScreen()
    this.height = height
    this.models = [
      {
        label: '编码',
        value: '',
        disabled: false,
        input: 'text',
        placeholder: '请输入',
      },
      {
        label: '名称',
        value: '',
        disabled: false,
        input: 'text',
        placeholder: '请输入',
      },
      {
        label: '所属上级',
        value: '',
        disabled: true,
        input: 'select',
        placeholder: '请选择',
      },
    ]
  },
  onLoad(option) {
    this.currentDate = curTime()
    this.user = getUserInfo()
    this.getSubjectList()
  },
  methods: {
    receiveTree(data){
      console.log(data)
      if (data) {
       this.form.pid=data.id
       this.form.pname=data.name
       this.form.pcode=data.code
      }
    },
    receiveFromChild(data) {
      if (data) {
        this.models[data.index].value = data.data.value
      }
    },
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    getSubjectList() {
      const _this = this
      this.uniShowLoading()
      basSubjectList({ page: 1, size: 999 })
        .then(res => {
          _this.uniHideLoading()
          _this.subjectList = res.content

        })
        .catch(err => {
          _this.uniHideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    submit() {
      const _this = this
      console.log(_this.models)
      _this.form.code = _this.models[0].value
      _this.form.name = _this.models[1].value
     
      if (!_this.form.code) {
        uni.showToast({
          title: '请输入客户编码',
          icon: 'none',
        })
        return
      }
      if (!_this.form.name) {
        uni.showToast({
          title: '请输入客户名称',
          icon: 'none',
        })
        return
      }
      uni.showLoading()

      addBasSubject(this.form)
        .then(res => {
          uni.hideLoading()
          if (res.status === 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            uni.$emit('refreshSubData', { refresh: true })
            uni.navigateBack({
              delta: 1,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.ditu {
  background-color: #f4f5f9;
  padding: 20rpx;
  height: 100vh;
  font-size: 28rpx;
  &_box {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-top: 20rpx;

    .row {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
      .label {
        color: #888;
        font-size: 26rpx;
      }
    }
    .border-bottom {
      border-bottom: 1rpx solid #f1f1f1;
    }
    .photoinfo {
      height: 150rpx;
      width: 150rpx;
      border-radius: 20rpx;
      position: relative;
      margin-top: 10rpx;
      image {
        height: 150rpx;
        width: 150rpx;
      }
      .showphoto {
        border-radius: 20rpx;
        width: 150rpx;
        height: 150rpx;
      }
      .del {
        /* background-color: red; */
        color: white;
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 10rpx;
        top: 5rpx;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 25rpx;
        line-height: 30rpx;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
    }
    .back {
      background-color: white;
      color: #333;
      border: 1rpx solid #cbd2de;
    }
  }
}
.canvas-view {
  position: fixed;
  top: -99999999rpx;
}
.canvas {
  width: 250px;
  height: 444px;
  opacity: 0;

  z-index: -999;
}
</style>
